import React from 'react'
import {Table, Button} from 'antd'
import {processImg, config} from 'utils'
import styles from './List.less'
import {layer} from 'components'

const HotList = ({...tableProps}) => {
  const columns = [
    {
      title: 'name',
      dataIndex: 'name',
      rowKey: 'name2',
    },
    {
      title: '图片',
      dataIndex: 'mainPic',
      rowKey: 'mainPic2',
      render: src => <img width={200} height={100} src={(src !=='' && src !== undefined) ? processImg(src, config.imgProcessType.s3) : ''}/>,
    },
    {
      title: 'url',
      dataIndex: 'url',
      rowKey: 'url',
    },
    {
      title: '操作',
      dataIndex: 'gathered',
      rowKey: 'op2',
      width: 300,
      render: (gathered, record) => {
        return (
          <span>
          <Button type="primary" onClick={() => {
            tableProps.viewDetail({id : record._id, type: 2})
          }}>查看</Button>
            &nbsp;<Button type={gathered ? 'primary' : '' } onClick={() => tableProps.gatheredHandel({type: 2, id: record._id, gathered: gathered ? 0 : 1})}>{gathered ? '已采集' : '未采集' }</Button>
            &nbsp;<Button onClick={()=> layer.open({content: <span>{record.url}</span>})}>源url</Button>
        </span>
        )
      }
    }
  ]

  return (
    <div>
      <Table
        {...tableProps}
        bordered
        scroll={{x: 900}}
        columns={columns}
        simple
        className={styles.table}
        rowKey={record => record.id}
      />
    </div>
  )
}

export default HotList
